<template>
  <div ref="lineChartRef" class="chart-container"></div>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, watchEffect, onMounted, nextTick } from "vue";
import { echarts, ECOption } from "@/hooks/echarts/chartInitHook";
import { users } from "@/shared/types/user";
import { ECharts } from "echarts/core";
import { courses } from "../../shared/types/courses";
import { number } from "style-value-types";

const lineChartRef = ref<HTMLDivElement>();
let lineChart: ECharts;

const props = defineProps<{
  expInfo:
    | {
        name: string;
        questions: { score: number }[];
        userExperiments: { score: number }[];
        _id: string;
      }[]
    | undefined;
  courseInfo:
    | {
        //students
        _id: string;
        student: users[];
        course: string;
      }[]
    | undefined;
  color: string[];
}>();

const { expInfo, courseInfo } = toRefs(props);

watchEffect(() => {
  if (!lineChartRef.value || !expInfo.value || !courseInfo.value) return;

  const rates = expInfo.value.map((exp) => {
    return exp.userExperiments.length / courseInfo.value!.length;
  });
  // console.log(rates);
  const datas = expInfo.value.map((exp, index) => {
    const group = exp.userExperiments.reduce(
      (pre, cur, arr) => {
        return {
          max: pre.max > cur.score ? pre.max : cur.score,
          min: pre.min < cur.score ? pre.min : cur.score,
          avg: pre.avg + Math.round(cur.score / courseInfo.value!.length),
        };
      },
      {
        max: 0,
        min: Infinity,
        avg: 0,
      }
    );
    if(group.min === Infinity) group.min = 0
    return group;
  });
  console.log(datas);

  lineChart = echarts.init(lineChartRef.value);

  const theOption: ECOption = {
    title: {
      text: "实验完成率",
      textStyle: {
        fontWeight: "normal",
        fontSize: 16,
      },
      top: "10%",
    },
    grid: {
      // show:true,
      top: "20%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["最低分", "最高分", "平均分"],
      top: "10%",
      icon: "circle",
    },
    xAxis: {
      boundaryGap: true,
      data: expInfo.value.map((e) => e.name),
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      name: "分数",
      nameLocation: "middle",
      nameGap: 40,
      // scale: true,
      nameTextStyle: {},
    },
    emphasis: {
      itemStyle: {
        opacity: 1,
      },
    },
    series: [
      {
        name: "最低分",
        type: "bar",
        data: datas.map((d) => d.min),
        // lineStyle:{
        //     color:'#'
        // },
        itemStyle: {
          // opacity: 0
        },
      },
      {
        name: "最高分",
        type: "bar",
        data: datas.map((d) => d.max),
        // lineStyle:{
        //     color:'#'
        // },
        itemStyle: {
          // opacity: 0
        },
      },
      {
        name: "平均分",
        type: "bar",
        data: datas.map((d) => d.avg),
        // lineStyle:{
        //     color:'#'
        // },
        itemStyle: {
          // opacity: 0
        },
      },
    ],
    color: props.color,
  };

  lineChart.setOption(theOption);
});
</script>

<style lang="less" scoped>
.chart-container {
  height: 100%;
  width: 100%;
  position: relative;
  // background-color: aqua;
}
</style>
